<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>登录注册界面</title>
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <style>
    body{
      
      background-color: #f1f1f1;
    }
    .mainCard{
      width: 313px;
      height: 600px;
      background: #fff;
      border-radius: 10px;
      margin: 200px auto;
      vertical-align: middle;
      box-shadow: 0 0 8px rgba(0,0,0,.1);
      padding: 68px 84px 59px;
    }
    .title {
      margin: 0px 76px 70px;
    }
    .title .el-button{
      font-size: 35px;
    }
  </style>
</head>
<body>
  <div id="app">
    <div class="mainCard">
      <div class="title">
        <el-button type="text" @click="loginDiv" :style="{color: loginTitleColor}">登录</el-button>
        <b>·</b>
        <el-button type="text" @click="registerDiv" :style="{color: registerTitleColor}">注册</el-button>
      </div>
      <div class="register" :style="{display: registerDisplay}" >
        <el-form :model="registerForm" ref="registerForm" :rules="registerRules" label-width="100px" class="demo-dynamic">
          <el-form-item prop="name" label-width="0">
            <el-input placeholder="用户名"
              v-model="registerForm.name"
              suffix-icon="el-icon-user"
              ></el-input>
          </el-form-item>
          <el-form-item prop="password" label-width="0">
            <el-input placeholder="密码"
              v-model="registerForm.password"
              suffix-icon="el-icon-lock"
              show-password
              ></el-input>
          </el-form-item>
          <el-form-item prop="passwordConfirm" label-width="0">
            <el-input placeholder="确认密码"
              v-model="registerForm.passwordConfirm"
              suffix-icon="el-icon-lock"
              show-password
              ></el-input>
          </el-form-item>
          <el-form-item label-width="0">
            <el-button type="primary"  @click="submitRegisterForm('registerForm')" style="margin: 0 122px;">提交</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="login" :style="{display: loginDisplay}">
        <el-form :model="loginForm" ref="loginForm" label-width="100px" :rules="loginRules" class="demo-dynamic">
          <el-form-item prop="lid" label-width="0">
            <el-input placeholder="账号"
              v-model="loginForm.lid"
              suffix-icon="el-icon-user"
              ></el-input>
          </el-form-item>
          <el-form-item prop="password" label-width="0">
            <el-input placeholder="密码"
              v-model="loginForm.password"
              suffix-icon="el-icon-lock"
              show-password
              ></el-input>
          </el-form-item>
 
          <el-form-item label-width="0">
            <el-button type="primary"  @click="submitLoginForm('loginForm')" style="margin: 0 122px;">提交</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>


    <!-- <input type="text" v-model="query"> -->
  </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
  // Vue.use(new Element());
  new Vue({
    el: '#app',
    methods:{
      submitRegisterForm(formName) {
        console.log(this.referer);
        this.$refs[formName].validate((valid) => {
          if (valid) {
            const data = Object.assign(this.registerForm, {
              appId: this.client_id,
              redirectUri: this.redirect_uri,
            })
            axios.post('/oidc/register', data)
            .then((response) => {
              if(response.data.result === 0) {
                window.location.href = this.url;
              } else {
                alert(response.data.msg);
                // this.$message.error(response.data.msg);
              }
            })
            .catch(function (error) {
              alert('发送失败')
              // this.$message.error('发送失败');
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      submitLoginForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            const data = Object.assign(this.loginForm, {
              appId: this.client_id,
              redirectUri: this.redirect_uri,
            })
            axios.post('/oidc/check_psw',data)
            .then((response) => {
              if(response.data.result === 0) {
                window.location.href = this.url;
              } else {
                alert(response.data.msg)
                // this.$message({
                //   message: response.data.msg,
                //   type: 'error'
                // });
                // this.$message.error(response.data.msg);
              }
            })
            .catch(function (error) {
              console.log(error);
              alert('发送失败')
              // this.$message({
              //   message: '发送失败',
              //   type: 'error'
              // });
              // this.$message.error('发送失败');
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      registerDiv() {
        this.registerDisplay = 'block';
        this.loginDisplay = 'none';
        this.loginTitleColor = '#969696';
        this.registerTitleColor = '#409eff';
      },
      loginDiv() {
        this.registerDisplay = 'none';
        this.loginDisplay = 'block';
        this.loginTitleColor = '#409eff';
        this.registerTitleColor = '#969696';
      }
    },
    data: function() {
      return {
        loginRules: {
          lid: { required: true, message: '请输入账号', trigger: 'blur' },
          password: { required: true, message: '请输入密码', trigger: 'blur' },
        },
        registerRules: {
          name: { required: true, message: '请输入用户名', trigger: 'blur' },
          password: { required: true, message: '请输入密码', trigger: 'blur' },
          passwordConfirm: { required: true, message: '请输入确认密码', trigger: 'blur' },
        },
        loginTitleColor: '#969696', // 灰色
        registerTitleColor: '#409eff', //蓝色
        registerDisplay:'block',
        loginDisplay:'none',
        registerForm: {
          name: '',
          password: '',
          passwordConfirm: '',
        },
        loginForm: {
          lid: '',
          password: '',
        },
        client_id: '<%=client_id%>',
        redirect_uri: '<%=redirect_uri%>',
        url: '<%=url%>',
      }
    }
  })
</script>
</html>
